<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地点索引</title>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=dGV3Nl6rFSsf3qMweDobQu8o8jXd1Laz"></script>
    <script src="zepto.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 500px;
            width: 100%;
        }

        #r-result {
            width: 100%;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="allmap"></div>
    <div id="r-result">
        城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
        地址: <input id="localName" type="text" style="width:100px; margin-right:10px;" />
        <input type="button" value="查询" onclick="theLocation()" />
    </div>
</body>
<script>
    var map = new BMap.Map("allmap");

    var point = new BMap.Point(113.64371562133744, 34.72920157550659);

    map.centerAndZoom(point, 15);

    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放

    map.setHeading(64.5);   //设置地图旋转角度

    map.setTilt(73);       //设置地图的倾斜角度

    var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMap.ZoomControl();  // 添加比例尺控件
    map.addControl(zoomCtrl);

    function theLocation() {
        // localName
        var index = $("#localName").val();
        if (index) {
            var address = $("#cityName").val() + $("#localName").val();
            var node = document.createElement("script");
            node.src = "http://api.map.baidu.com/geocoding/v3/?address=" + address + "&output=json&ak=00EvVBGyqOZLhHln2lVLESrPXSyU5fIQ&callback=fun";
            document.body.appendChild(node);
        } else {

            var address = $("#cityName").val();
            var node = document.createElement("script");
            node.src = "http://api.map.baidu.com/geocoding/v3/?address=" + address + "&output=json&ak=00EvVBGyqOZLhHln2lVLESrPXSyU5fIQ&callback=ret";
            document.body.appendChild(node);


        }

    }
    function ret(res) {
        var lng = res.result.location.lng;
        var lat = res.result.location.lat;
        var point = new BMap.Point(lng, lat);
        map.setCenter(point);
    }

    function fun(res) {
        var lng = res.result.location.lng;
        var lat = res.result.location.lat;
        // console.log(lng,lat);
        var point = new BMap.Point(lng, lat);

        var marker = new BMap.Marker(point);

        map.setCenter(point);

        map.addOverlay(marker);

        var name = $("#localName").val()
        marker.addEventListener("click", function (e) {

            var opts = {
                width: 250,     // 信息窗口宽度
                height: 100,    // 信息窗口高度
                title: "Hello"  // 信息窗口标题
            }
            var infoWindow = new BMap.InfoWindow(name + "欢迎您", opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, map.getCenter());
        })


    }
</script>

</html>